<!doctype html>

<html lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="shortcut icon" href="/favicon.ico">
    <!-- 标题 -->
    <title>登录页</title>
    <!-- 导入CSS -->
    <link href="./dist/css/tabler.min.css?1674944402" rel="stylesheet"/>
    <link rel="stylesheet" href="./dist/css/jquery.toast.css">
    <!-- 设置字体和动画样式 -->
    <style>
      /* 表单动画 */
      .form-control, .form-selectgroup-label {
        transition: all 0.3s ease;
      }
      .form-control:focus {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      }
      /* 按钮动画 */
      .btn {
        transition: all 0.3s ease;
      }
      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      }
      /* 背景动画 */
      .page {
        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
      }
      @keyframes gradient {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
      /* 卡片样式优化 */
      .card {
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.9);
        border: none;
        transition: all 0.3s ease;
      }
      .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
      }
      /* 链接动画 */
      a {
        transition: all 0.3s ease;
        position: relative;
      }
      a:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: -2px;
        left: 0;
        background-color: currentColor;
        transform: scaleX(0);
        transition: transform 0.3s ease;
      }
      a:hover:after {
        transform: scaleX(1);
      }
    /* 第三方登录按钮样式 */
    .btn-qq {
      background-color: #12B7F5;
      color: white;
      transition: all 0.3s ease;
    }
    .btn-qq:hover {
      background-color: #0E9FD9;
      color: white;
      transform: translateY(-2px);
    }
    .btn-wechat {
      background-color: #2AAE67;
      color: white;
      transition: all 0.3s ease;
    }
    .btn-wechat:hover {
      background-color: #24965A;
      color: white;
      transform: translateY(-2px);
    }
    .btn-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }
    .hr-text {
      position: relative;
      text-align: center;
      margin: 1rem 0;
      color: #6c757d;
    }
    .hr-text:before,
    .hr-text:after {
      content: '';
      position: absolute;
      top: 50%;
      width: 30%;
      height: 1px;
      background-color: #dee2e6;
    }
    .hr-text:before {
      left: 0;
    }
    .hr-text:after {
      right: 0;
    }
    </style>
  </head>
  <body class="d-flex flex-column">
    <!-- 正文 -->
    <div class="page page-center">
        <div class="container container-normal py-4">
          <div class="row align-items-center g-4">
            <div class="col-12">
              <div class="container-tight">
                <div class="text-center mb-4">
                  <img src="./image/bit-forum-logo01.png" height="50" alt="">
                  <h1 class="mt-3">欢迎来到 IT 论坛</h1>
                  <p class="text-muted">分享知识，交流思想，共同成长</p>
                </div>
                <div class="card card-md">
                  <div class="card-body">
                    <h2 class="text-center mb-4">用户登录</h2>
                    <div class="text-center mb-4">
                      <p class="text-muted">登录后即可参与讨论，发表见解</p>
                    </div>
                    <form id="signInForm" method="get" autocomplete="off" novalidate>
                      <div class="mb-3">
                        <label class="form-label required">用户名</label>
                        <input type="text" class="form-control" placeholder="请输入用户名" autocomplete="off" name="username" id="username">
                        <div class="invalid-feedback">用户名不能为空</div>
                      </div>
                      <div class="mb-2">
                        <label class="form-label required">
                          密码
                          <!-- <span class="form-label-description">
                            <a href="#">忘记密码</a>
                          </span> -->
                        </label>
                        <div class="input-group input-group-flat">
                          <input type="password" class="form-control"  placeholder="请输入密码"  autocomplete="off" name="password"
                          id="password">
                          <span class="input-group-text">
                            <a href="javascript:void(0);" id="password_a" class="link-secondary" title="显示密码" data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
                            </a>
                          </span>
                          <div class="invalid-feedback">密码不能为空</div>
                        </div>
                      </div>
                      <div class="mb-3">
                        <div class="form-label">登录身份</div>
                        <div class="form-selectgroup">
                          <label class="form-selectgroup-item">
                            <input type="radio" name="loginType" value="user" class="form-selectgroup-input" checked>
                            <span class="form-selectgroup-label">普通用户</span>
                          </label>
                          <label class="form-selectgroup-item">
                            <input type="radio" name="loginType" value="admin" class="form-selectgroup-input">
                            <span class="form-selectgroup-label">管理员</span>
                          </label>
                        </div>
                      </div>
                      <!-- <div class="mb-2">
                        <label class="form-check">
                          <input type="checkbox" class="form-check-input"/>
                          <span class="form-check-label">记住我</span>
                        </label>
                      </div> -->
                      <div class="form-footer">
                        <button id="submit" type="button" class="btn btn-primary w-100">登录</button>
                      </div>
                      <div class="hr-text">或者使用</div>
                      <div class="d-flex gap-2">
                        <button type="button" class="btn w-100 btn-icon btn-qq" onclick="loginWithQQ()">
                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 448 512"><path fill="currentColor" d="M433.754 420.445c-11.526 1.393-44.86-52.741-44.86-52.741 0 31.345-16.136 72.247-51.051 101.786 16.842 5.192 54.843 19.167 45.803 34.421-7.316 12.343-125.51 7.881-159.632 4.037-34.122 3.844-152.316 8.306-159.632-4.037-9.045-15.25 28.918-29.214 45.783-34.415-34.92-29.539-51.059-70.445-51.059-101.792 0 0-33.334 54.134-44.859 52.741-5.37-.65-12.424-29.644 9.347-99.704 10.261-33.024 21.995-60.478 40.144-105.779C60.683 98.063 108.982.006 224 0c113.737.006 163.156 96.133 160.264 214.963 18.118 45.223 29.912 72.85 40.144 105.778 21.768 70.06 14.716 99.053 9.346 99.704z"/></svg>
                          QQ登录
                        </button>
                        <button type="button" class="btn w-100 btn-icon btn-wechat" onclick="loginWithWechat()">
                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path fill="currentColor" d="M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154zm-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4zm-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2zM499 277.5c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S241 418.8 333.6 418.8c19.3 0 38.9-4.9 58.3-9.9l53.2 29.3-14.8-48.6C477 355.1 499 319.2 499 277.5zm-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6zm107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6z"/></svg>
                          微信登录
                        </button>
                      </div>
                    </form>
                  </div>
                </div>
                <div class="text-center text-muted mt-3">
                  还没有注册吗? <a href="./sign-up.html" tabindex="-1">立即加入我们</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </body>
  <!-- 导入JS -->
  <script src="./dist/js/jquery-3.6.3.min.js"></script>
  <script src="./dist/js/tabler.min.js"></script>
  <script src="./dist/js/jquery.toast.js"></script>
  <script>
    // 第三方登录函数
    function loginWithQQ() {
      // TODO: 实现QQ登录逻辑
      $.toast({
        heading: '提示',
        text: 'QQ登录功能开发中...',
        icon: 'info',
        position: 'top-center'
      });
    }

    function loginWithWechat() {
      // TODO: 实现微信登录逻辑
      $.toast({
        heading: '提示',
        text: '微信登录功能开发中...',
        icon: 'info',
        position: 'top-center'
      });
    }

    $(function () {
      // 获取控件
      // 用户名
      let usernameEl = $('#username');
      let passwordEl = $('#password');
      // 登录校验
      $('#submit').click(function () {
        let checkForm = true;
        // 校验用户名
        if (!usernameEl.val()) {
          usernameEl.addClass('is-invalid');
          checkForm = false;
        }
        // 校验密码
        if (!passwordEl.val()) {
          passwordEl.addClass('is-invalid');
          checkForm = false;
        }

        // 根据判断结果提交表单
        if (!checkForm) {
          return false;
        }

        // 构造数据
        let postData = {
            username : usernameEl.val(),
            password : passwordEl.val()
        };

        // 发送AJAX请求，成功后跳转到index.html
        $.ajax({
            type: 'POST',
            url: '/user/login',
            data: postData,
            contentType: 'application/x-www-form-urlencoded',
            success: function(response) {
              if (response.code == 0) {
                  // 根据登录类型和返回结果决定跳转页面
                  if (response.message === 'admin' && $('input[name="loginType"]:checked').val() === 'admin') {
                    // 跳转到管理员页面
                    location.href = '/admin.html';
                  } else if (response.message === 'user' && $('input[name="loginType"]:checked').val() === 'user') {
                    // 跳转到首页
                    location.href = '/index.html';
                  } else {
                    // 登录身份不匹配
                    $.toast({
                      heading: '警告',
                      text: '登录身份与账号类型不匹配',
                      icon: 'warning'
                    });
                  }
              } else {
                  // 提示信息
                  $.toast({
                    heading: '警告',
                    text: response.message,
                    icon: 'warning'
                  });
              }
            }
        });
      });

      // 表单元单独检验
      $('#username, #password').on('blur', function () {
        if ($(this).val()) {
          $(this).removeClass('is-invalid');
          $(this).addClass('is-valid');
        } else {
          $(this).removeClass('is-valid');
          $(this).addClass('is-invalid');
        }
      });

      // 显示密码
      $('#password_a').click(function () {
        if(passwordEl.attr('type') == 'password') {
          passwordEl.attr('type', 'text');
        } else {
          passwordEl.attr('type', 'password');
        }
      });

      // 添加Enter键登录功能
      $('#username, #password').on('keypress', function(e) {
        if (e.which === 13) { // Enter键的键码是13
          e.preventDefault(); // 阻止默认行为
          $('#submit').click(); // 触发登录按钮点击事件
        }
      });
    });
  </script>
</html>